<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/mao.css" media="screen" type="text/css" />
    <link rel="stylesheet" href="css/font-awesome.min.css" media="screen" type="text/css" />
</head>
<body>
    <div id="container">
        <div id="player">
            <audio id="audio">
                <source src="media/music.mp3" type="media/mpeg" codecs="mp3"/>
            </audio>
            <label class="to-lyrics-label" for="to-lyrics"><i class="fa fa-caret-down fa-lg"></i></label>
            <input type="checkbox" hidden id="to-lyrics">
            <div class="cover">
                <div class="controls">
                    <button title="循环播放"><i class="fa fa-retweet fa-lg"></i></button>
                    <button title="上一曲"><i class="fa fa-backward fa-2x"></i></button>
                    <button id="play-pause" title="播放" onclick="togglePlayPause()"><i class="fa fa-play fa-3x"></i></button>
                    <button title="下一曲"><i class="fa fa-forward fa-2x"></i></button>
                    <button title="顺序播放"><i class="fa fa-random fa-lg"></i></button>
                </div>
                <div>
                    <input name="volume" id="volume" min="0" max="1" step="0.1" type="range" conhange="setVolume()"/>
                </div>
                <div class="lyrics">
                    <p>陪你度过漫长岁月</p>
                    <p>演唱：陈奕迅</p>
                    <p>走过了人来人往 不喜欢也得欣赏</p>
                    <p>我是沉默的存在 不当你世界 只作你肩膀</p>
                    <p>拒绝成长到成长 变成想要的模样</p>
                    <p>在举手投降以前 让我再陪你一段</p>
                    <p>陪你把沿路感想活出了答案</p>
                    <p>陪你把独自孤单变成了勇敢</p>
                    <p>一次次失去又重来 我没离开</p>
                    <p>陪伴是 最长情的告白</p>
                    <p>陪你把想念的酸 拥抱成温暖</p>
                    <p>陪你把彷徨 写出情节来</p>
                    <p>未来多漫长 再漫长 还有期待</p>
                    <p>陪伴你 一直到 故事给说完</p>
                    <p>让我们静静分享 此刻难得的坦白</p>
                    <p>只是无声地交谈 都感觉幸福 感觉不孤单</p>
                </div>
                <p class="scroll">收起</p>
            </div>
        </div>
    </div>
    <script src="js/audio.js" charset="gok"></script>
</body>
</html>